import { ElMessage, ElMessageBox } from 'element-plus'

import { queryLayerMarkerInfo } from '@/service/api'
import { loadWarAllMapFactor } from '../../../../utils/common/warCreateMapFactor'
import { removeTempMapFactor } from '@/utils'
export interface OperationType {
  label: string
  type: string
  imgUrl: string
  state: boolean
}

export interface LayerType {
  id: string
  name: string
  state: boolean
  bhtmc: string
  cjr: string
  cjsj: string
  gxr: string
  gxsj: string
  sfyx: number
  qyid: string
  qymc: string
}

export function initFetchData(props: any, context?: any) {
  const { layerList } = toRefs(context)
  const chemicalStore = useChemicalStore()
  /** 删除操作 */
  const deleteLayerInfo = () => {
    const params = props.currentCheckLayerList?.map((item: any) => {
      return {
        bhtmc: item.bhtmc,
        id: item.id,
        qyid: item.qyid,
        qymc: item.qymc,
        sfyx: 0,
      }
    })
    updateLayerInfo(params).then(() => {
      ElMessage.success('删除成功')
      clearCheckLayerList()
      getList()
      props.layerOperationFlag = true
    })
    /** 清除选中图层信息 */
    function clearCheckLayerList() {
      props.currentCheckLayerList?.forEach((item: any) => {
        removeTempMapFactor(item.id)
      })
    }
  }

  /** 获取当前企业全部标绘图数据 */
  const getList = () => {
    queryLayerInfo({ key: (chemicalStore.qyInfo as any)?.id }).then((res: any) => {
      layerList.value = res.map((item: LayerType) => {
        // sfyx 自动 0 表示删除, 1 在库
        if (item.sfyx === 1) {
          return {
            ...item,
            state: false,
          }
        }
      })
    })
  }
  /** 弹出框方法: 仅删除和导出有弹窗 */
  const popupConfirmBox = (type: string) => {
    const content = type === 'delete' ? '是否确认删除' : '是否确认导出'
    const cancelPrompt = type === 'delete' ? '取消删除' : '取消导出'
    ElMessageBox.confirm(content, '确认信息', {
      distinguishCancelAndClose: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    })
      .then(() => {
        if (type === 'delete') {
          // 删除 图层操作
          deleteLayerInfo()
        } else if (type === 'export') {
          // TODO  导出接口
          // exportLayersMap()
          props.exportLayerFlag = true
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: cancelPrompt,
        })
      })
  }

  /** 图层相关操作： 新增、编辑、删除、导出 */
  const handleLayerOperation = (data: OperationType) => {
    const checkLayerList = layerList.value?.filter((item: LayerType) => {
      return item.state
    })

    props.currentCheckLayerList = checkLayerList
    switch (data.type) {
      case 'add': // 新增操作
        props.layerOperationConfirmData = data
        break
      case 'edit': // 编辑操作
        if (checkLayerList?.length === 1) {
          props.layerOperationConfirmData = data
        } else {
          ElMessage.error('请至多选择一个标绘图')
          props.layerOperationConfirmData = null
        }
        break
      case 'delete': // 删除操作
        if (checkLayerList?.length) {
          popupConfirmBox(data.type)
        } else {
          ElMessage.error('请至少选择一个标绘图')
          props.layerOperationConfirmData = null
        }
        break
      case 'export': // 导出操作
        popupConfirmBox(data.type)
        break
      default:
        break
    }
  }

  /** 图层点击事件 勾选 */
  const handleLayerClick = (data: LayerType) => {
    data.state = !data.state
    if (data.state) {
      loadLayerMarkerInfo(data)
    } else {
      // TODO 清除当前图层上图
      removeTempMapFactor(data.id)
    }
  }

  return {
    handleLayerOperation,
    handleLayerClick,
    getList,
  }
}

/** 加载图层标绘 */
export async function loadLayerMarkerInfo(data: LayerType) {
  const params = {
    cjid: data.id,
    qyid: data.qyid,
  }
  new Promise<void>((resolve, reject) => {
    queryLayerMarkerInfo(params).then(async (res: any) => {
      await loadWarAllMapFactor(res)
      console.log('56565656565656  加载完要素')
      resolve()
    })
  })
}
